Skip to content

Refactor 2: [Phase 2] Refactor Screens to use FormFieldGroup (Shared Components) #6368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
priyashuu wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Refactor 2: [Phase 2] Refactor Screens to use FormFieldGroup (Shared Components) #6368

priyashuu wants to merge 1 commit into from

Conversation

@priyashuu
Copy link

@priyashuu priyashuu commented Jan 12, 2026 •
edited by coderabbitai bot
Loading

What kind of change does this PR introduce?
This PR refactors multiple Admin shared components to use the centralized FormFieldGroup and typed field components instead of raw Form.Group / Form.Control patterns.

Issue Number:
#6310

Fixes #6310

Snapshots/Videos:

If relevant, did you update the documentation?

Summary

Does this PR introduce a breaking change?

Checklist

CodeRabbit AI Review

  • I have reviewed and addressed all critical issues flagged by CodeRabbit AI
  • I have implemented or provided justification for each non-critical suggestion
  • I have documented my reasoning in the PR comments where CodeRabbit AI suggestions were not implemented

Test Coverage

  • I have written tests for all new changes/features
  • I have verified that test coverage meets or exceeds 95%
  • I have run the test suite locally and all tests pass

Other information

Have you read the contributing guide?

Yes

Summary by CodeRabbit

Release Notes

  • Chores

    • Added comprehensive Docker containerization for development and production deployments
    • Introduced GitHub Actions CI/CD workflows for automated testing, code quality checks, and deployment
    • Configured code coverage tracking and quality gates
    • Enhanced development tooling with lint-staged and Husky git hooks
    • Added ESLint, Prettier, and TypeScript compilation validations

  • Tests

    • Added extensive Cypress end-to-end test suite covering admin and user portal functionality

  • Documentation

    • Established documentation website with Docusaurus setup and deployment pipeline

✏️ Tip: You can customize this high-level summary in your review settings.

@priyashuu priyashuu requested a review from palisadoes as a code owner January 12, 2026 04:48
@keploy
Copy link

keploy bot commented Jan 12, 2026 •
edited
Loading

No significant changes currently retry

@github-actions
Copy link

github-actions bot commented Jan 12, 2026

Our Pull Request Approval Process

This PR will be reviewed according to our:

  1. Palisadoes Contributing Guidelines

  2. AI Usage Policy

Your PR may be automatically closed if:

  1. Our PR template isn't filled in correctly

  2. You haven't correctly linked your PR to an issue

Thanks for contributing!

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 12, 2026 •
edited
Loading

Caution

Review failed

Failed to post review comments

Walkthrough

This comprehensive infrastructure enhancement PR introduces a complete CI/CD pipeline framework, E2E testing infrastructure, pre-commit validation hooks, Docker deployment configurations, and code quality enforcement standards. It establishes automated checks for test coverage, TypeScript compilation, CSS policies, i18n compliance, accessibility requirements, component architecture, and translations, along with deployment automation for documentation and Docker-based environments.

Changes

Cohort / File(s) Summary
Configuration & Code Quality Standards
.coderabbit.yaml, .eslintrc.json, .flake8, .pydocstyle, .prettierrc, .prettierignore, .graphqlrc.yml, commitlint.config.js, config/babel.config.cjs, .lintstagedrc.json		 Establishes comprehensive linting, formatting, and code review automation rules. Removes ESLint config in favor of linting integration; adds Prettier endOfLine option; introduces strict validation for test coverage, TypeScript, React patterns, a11y, i18n, and component architecture via CodeRabbit framework.
GitHub Workflows - CI/CD Pipeline
.github/workflows/pull-request.yml, .github/workflows/push.yml, .github/workflows/codeql-codescan.yml, .github/workflows/auto-assign.yml, .github/workflows/auto-label.json5, .github/workflows/issue-assigned.yml, .github/workflows/issue-unassigned.yml, .github/workflows/issue.yml, .github/workflows/pull-request-review.yml, .github/workflows/pull-request-target.yml, .github/workflows/push-deploy-website.yml, .github/workflows/stale.yml		 Implements multi-faceted automated workflows: complex PR validation with coverage merging, test sharding, Docker health checks, security scanning, and documentation deployment; push-based merge conflict detection and coverage tracking; CodeQL analysis; issue/PR automation with reusable workflows; and automated stale content management. Replaces removed ci.yml, codeql-analysis.yml, linter.yml, npm-publish.yml workflows.
Workflow Scripts - Validation & Analysis
.github/workflows/scripts/check-tsdoc.js, .github/workflows/scripts/check-minio-compliance.cjs, .github/workflows/scripts/css_check.py, .github/workflows/scripts/check_docstrings.py, .github/workflows/scripts/compare_translations.py, .github/workflows/scripts/countline.py, .github/workflows/scripts/translation_check.py, .github/workflows/scripts/app_health_check.sh, .github/workflows/scripts/venv.sh, .github/workflows/requirements.txt		 Introduces comprehensive validation suite: TSDoc enforcement, MinIO legacy code detection, embedded CSS policy enforcement, Google-style Python docstring validation, translation file comparison, source code line-count analysis, i18n tag validation, container health checking, and Python virtual environment setup. High-density logic for pattern detection and violation reporting.
Workflow Configuration & Documentation
.github/workflows/README.md, .github/workflows/config/check-pr-issue-skip-usernames.txt, .github/workflows/config/countline_excluded_file_list.txt		 Documents workflow file organization, naming conventions, and Python script standards; provides skip lists for PR-issue checks and exclusion patterns for line-count metrics.
GitHub Issue & PR Templates
.github/ISSUE_TEMPLATE/bug-report.md, .github/ISSUE_TEMPLATE/feature-request.md, .github/pull_request_template.md, CODEOWNERS		 Updates issue templates with standardized naming and labels; expands PR template with CodeRabbit review, test coverage, breaking change, and documentation checklist sections; establishes code ownership for .github/ directory.
Husky Pre-Commit Hooks
.husky/commit-msg, .husky/post-merge, .husky/pre-commit		 Implements multi-stage commit validation: enforces conventional commit messages, triggers dependency installation on package.json changes, and runs comprehensive pre-commit checks (ESLint, Prettier, MinIO compliance, i18n, CSS, docstrings, translations, TSDoc, accessibility, Python linting via venv).
Cypress E2E Test Infrastructure
cypress.config.ts, cypress/README.md, cypress/support/commands.ts, cypress/support/e2e.ts, cypress/fixtures/users.json, cypress/fixtures/advertisementData.json		 Establishes end-to-end testing framework with detailed browser configuration (viewports, timeouts, coverage), custom Cypress commands for API-based login with session caching and toast assertions, and fixture data for user and advertisement test scenarios.
Cypress Page Objects - Admin Portal
cypress/pageObjects/AdminPortal/AdminDashboard.ts, cypress/pageObjects/AdminPortal/AdminEventPage.ts, cypress/pageObjects/AdminPortal/AdvertisementPage.ts, cypress/pageObjects/AdminPortal/ActionItemPage.ts, cypress/pageObjects/AdminPortal/LeftDrawer.ts, cypress/pageObjects/AdminPortal/PeoplePage.ts, cypress/pageObjects/AdminPortal/PostPage.ts		 Defines reusable page object abstractions for admin portal features: organization/dashboard navigation, event CRUD operations, advertisement management, action item workflows, responsive layout validation, member management, and post creation/editing. Provides fluent chainable APIs.
Cypress Page Objects - Auth & User Portal
cypress/pageObjects/auth/LoginPage.ts, cypress/pageObjects/UserPortal/UserDashboard.ts		 Implements login page interactions with optional reCAPTCHA handling and user dashboard navigation. Includes toast validation helpers.
Cypress E2E Test Specs - Admin
cypress/e2e/admin_spec/event.cy.ts, cypress/e2e/admin_spec/actionItem.cy.ts, cypress/e2e/admin_spec/advertisement.cy.ts, cypress/e2e/admin_spec/leftDrawer.cy.ts, cypress/e2e/admin_spec/people.cy.ts, cypress/e2e/admin_spec/posts.cy.ts		 Comprehensive test suites for admin portal workflows: event creation/update/deletion, action item management with volunteer assignment, advertisement campaigns, responsive drawer styling, people/member search and addition, and post management.
Cypress E2E Test Specs - Login & Dashboard
cypress/e2e/login_spec/adminLogin.cy.ts, cypress/e2e/login_spec/userLogin.cy.ts, cypress/e2e/dashboard_spec/adminDashboard.cy.ts, cypress/e2e/dashboard_spec/userDashboard.cy.ts		 End-to-end tests for authentication flows (superAdmin/admin/user login success/failure) and dashboard navigation for both admin and user roles. Includes error toast and localStorage validation.
Cypress Script Tests
.github/workflows/scripts/test/README.md, .github/workflows/scripts/test/test_css_check.py, .github/workflows/scripts/test/test_translation_check.py		 Unit test coverage for CSS policy enforcement and translation validation scripts, covering violation detection, file processing, directory scanning, output formatting, and CLI argument handling.
Docker Configuration
docker/Dockerfile.dev, docker/Dockerfile.deploy, docker/Dockerfile.prod, docker/docker-compose.dev.yaml, docker/docker-compose.deploy.yaml, docker/docker-compose.prod.yaml, config/docker/setup/nginx.conf, config/docker/setup/apache.conf		 Multi-stage Docker builds for development, deployment, and production environments with pnpm-based dependency management. Production uses nginx with GraphQL/WebSocket proxying and gzip compression; includes docker-compose orchestration with healthchecks, volume mounts, and environment configuration for each environment.
Vite & Build Configuration
config/vite.config.ts, config/vite.config.spec.ts		 Comprehensive Vite configuration with environment-driven port/API validation, proxy configuration for GraphQL, tree-shaking rules, vendor code chunking (React, MUI, Apollo, i18n), esbuild optimizations, and Istanbul coverage instrumentation. Test specs validate port parsing, API target extraction, and WebSocket path derivation.
Environment & Git Configuration
.env.example, .gitignore, .dockerignore, docs/.gitignore, docs/CNAME, docs/README.md		 Provides sample environment variables (PORT, Talawa API URL, reCAPTCHA configuration, logging toggles); expands .gitignore with Python ecosystem patterns and environment file variants; adds Docker build context exclusions; establishes documentation site configuration for docs-admin.talawa.io.
Removed Docker & Build Files
Docker_Container/dockerfile, Docker_Container/docker-compose.yml, Docker_Container/README.md, Docker_Container/.dockerignore		 Removes deprecated Docker setup from Docker_Container directory in favor of centralized config/docker setup.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~65 minutes

Possibly related PRs

  • #3988 — Adds Cypress E2E test infrastructure, page objects, fixtures, and support commands alongside commitlint/Husky commit-msg configuration files
  • #4762 — Introduces .coderabbit.yaml configuration for automated code review framework and validation standards

Suggested reviewers

  • palisadoes
  • noman2002
  • Kevoniat

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

  • Ignore
❌ Failed checks (1 error, 2 warnings, 4 inconclusive)
Check name Status Explanation Resolution
Component Architecture Compliance ❌ Error Component architecture compliance check reveals multiple violations: ProfileForm.tsx (820 lines) not refactored with zero FormTextField usages; inline interfaces remain in DatePicker.tsx and TimePicker.tsx; inconsistent architectural implementation across components. Complete refactoring by adding FormTextField usages to ProfileForm.tsx, extracting inline interfaces from DatePicker and TimePicker into separate files, ensuring consistent FormFieldGroup wrappers, and verifying accessibility attributes via wrappers.
Description check ⚠️ Warning The PR description is largely incomplete despite the template; critical sections are missing or empty, including motivation, breaking change details, and proper summary. Complete the description by filling in the Summary section with clear motivation, explicitly state if breaking changes exist, and provide more detail beyond the one-line refactor statement.
Out of Scope Changes check ⚠️ Warning The raw_summary shows 375+ lines of configuration, workflow, Docker setup, and test infrastructure changes, which are significantly out of scope for a component refactor targeting #6310. Remove all unrelated changes (config files, workflows, Docker setup, and test infrastructure). Keep only the component refactoring changes directly addressing the FormFieldGroup migration in shared components.
Title check ❓ Inconclusive The PR title 'Refactor' is vague and generic, providing no meaningful information about the specific changes made. Use a more descriptive title such as 'Refactor: Replace Form.Group/Form.Control with FormFieldGroup in shared components' to clearly convey the primary change.
Linked Issues check ❓ Inconclusive The PR references issue #6310 with a clear objective to refactor components to use FormFieldGroup, but without the actual code changes visible in the summary, compliance cannot be fully verified. Verify that all files mentioned in #6310 (TimePicker, DatePicker, EventForm, DateRangePicker, Recurrence sections, ProfileForm) have been refactored to use FormFieldGroup and typed field components per the acceptance criteria.
Test Coverage Gate ❓ Inconclusive PR contains only configuration, infrastructure, and test setup files with zero source code modifications in src/ directory, making test coverage requirement inapplicable. Clarify if PR is infrastructure-only or if FormFieldGroup refactoring source changes should be included. If refactoring intended, add component modifications with test coverage and re-run coverage verification.
Typescript Compilation ❓ Inconclusive PR summary lacks actual TypeScript source code changes; configuration files appear syntactically valid but without full compilation test execution, TypeScript error status cannot be confirmed. Execute pnpm run typecheck locally, provide actual src/ directory modifications implementing FormFieldGroup refactoring, and verify full compilation without errors or warnings.
✅ Passed checks (1 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed Docstring coverage is 98.45% which is sufficient. The required threshold is 80.00%.
✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@priyashuu priyashuu changed the base branch from main to develop January 12, 2026 04:49
@palisadoes
Copy link
Contributor

palisadoes commented Jan 12, 2026

Please title of the PR to be more search friendly

Please also:

  1. Fix any failing tests
  2. Ensure test code coverage for your patch meets our minimum >=95% requirements
  3. Fix any CI/CD failures. Click on the Details link for the tests to get an explanation of the cause(s)
    1. The sensitive files check does not prevent the entire test suite from running.
  4. Ensure code rabbit approves your changes
  5. Remedy any conflicting files

@priyashuu priyashuu changed the title Refactor Refactor 2: [Phase 2] Refactor Screens to use FormFieldGroup (Shared Components) Jan 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@palisadoes palisadoes Awaiting requested review from palisadoes

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Refactor 2: [Phase 2] Refactor Screens to use FormFieldGroup (Shared Components)

2 participants

@priyashuu @palisadoes